<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>基本演示</legend>
		</fieldset>
		<div class="layui-btn-container">
			<button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
			<button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
			<button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
		</div>

		<div id="test12" class="demo-tree-more"></div>

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>常规用法</legend>
		</fieldset>

		<div id="test1" class="demo-tree demo-tree-box"></div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>无连接线风格</legend>
		</fieldset>
		<div id="test13" class="demo-tree-more"></div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>仅节点左侧图标控制收缩</legend>
		</fieldset>

		<div id="test2" class="demo-tree"></div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>手风琴模式</legend>
		</fieldset>

		<div id="test4" class="demo-tree"></div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>点击节点新窗口跳转</legend>
		</fieldset>

		<div id="test5" class="demo-tree"></div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>开启复选框</legend>
		</fieldset>

		<div id="test7" class="demo-tree"></div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>开启节点操作图标</legend>
		</fieldset>

		<div id="test9" class="demo-tree demo-tree-box" style="width: 200px; height: 300px; overflow: scroll;"></div>

		<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use(['tree', 'util'], function() {
				var tree = layui.tree,
					layer = layui.layer,
					util = layui.util

					//模拟数据
					,
					data = [{
						title: '一级1',
						id: 1,
						field: 'name1',
						checked: true,
						spread: true,
						children: [{
							title: '二级1-1 可允许跳转',
							id: 3,
							field: 'name11',
							href: 'https://www.layui.com/',
							children: [{
								title: '三级1-1-3',
								id: 23,
								field: '',
								children: [{
									title: '四级1-1-3-1',
									id: 24,
									field: '',
									children: [{
										title: '五级1-1-3-1-1',
										id: 30,
										field: ''
									}, {
										title: '五级1-1-3-1-2',
										id: 31,
										field: ''
									}]
								}]
							}, {
								title: '三级1-1-1',
								id: 7,
								field: '',
								children: [{
									title: '四级1-1-1-1 可允许跳转',
									id: 15,
									field: '',
									href: 'https://www.layui.com/doc/'
								}]
							}, {
								title: '三级1-1-2',
								id: 8,
								field: '',
								children: [{
									title: '四级1-1-2-1',
									id: 32,
									field: ''
								}]
							}]
						}, {
							title: '二级1-2',
							id: 4,
							spread: true,
							children: [{
								title: '三级1-2-1',
								id: 9,
								field: '',
								disabled: true
							}, {
								title: '三级1-2-2',
								id: 10,
								field: ''
							}]
						}, {
							title: '二级1-3',
							id: 20,
							field: '',
							children: [{
								title: '三级1-3-1',
								id: 21,
								field: ''
							}, {
								title: '三级1-3-2',
								id: 22,
								field: ''
							}]
						}]
					}, {
						title: '一级2',
						id: 2,
						field: '',
						spread: true,
						children: [{
							title: '二级2-1',
							id: 5,
							field: '',
							spread: true,
							children: [{
								title: '三级2-1-1',
								id: 11,
								field: ''
							}, {
								title: '三级2-1-2',
								id: 12,
								field: ''
							}]
						}, {
							title: '二级2-2',
							id: 6,
							field: '',
							children: [{
								title: '三级2-2-1',
								id: 13,
								field: ''
							}, {
								title: '三级2-2-2',
								id: 14,
								field: '',
								disabled: true
							}]
						}]
					}, {
						title: '一级3',
						id: 16,
						field: '',
						children: [{
							title: '二级3-1',
							id: 17,
							field: '',
							fixed: true,
							children: [{
								title: '三级3-1-1',
								id: 18,
								field: ''
							}, {
								title: '三级3-1-2',
								id: 19,
								field: ''
							}]
						}, {
							title: '二级3-2',
							id: 27,
							field: '',
							children: [{
								title: '三级3-2-1',
								id: 28,
								field: ''
							}, {
								title: '三级3-2-2',
								id: 29,
								field: ''
							}]
						}]
					}]

					//模拟数据1
					,
					data1 = [{
						title: '江西',
						id: 1,
						children: [{
							title: '南昌',
							id: 1000,
							children: [{
								title: '青山湖区',
								id: 10001
							}, {
								title: '高新区',
								id: 10002
							}]
						}, {
							title: '九江',
							id: 1001
						}, {
							title: '赣州',
							id: 1002
						}]
					}, {
						title: '广西',
						id: 2,
						children: [{
							title: '南宁',
							id: 2000
						}, {
							title: '桂林',
							id: 2001
						}]
					}, {
						title: '陕西',
						id: 3,
						children: [{
							title: '西安',
							id: 3000
						}, {
							title: '延安',
							id: 3001
						}]
					}]

					//模拟数据2
					,
					data2 = [{
						title: '早餐',
						id: 1,
						children: [{
							title: '油条',
							id: 5
						}, {
							title: '包子',
							id: 6
						}, {
							title: '豆浆',
							id: 7
						}]
					}, {
						title: '午餐',
						id: 2,
						checked: true,
						children: [{
							title: '藜蒿炒腊肉',
							id: 8
						}, {
							title: '西湖醋鱼',
							id: 9
						}, {
							title: '小白菜',
							id: 10
						}, {
							title: '海带排骨汤',
							id: 11
						}]
					}, {
						title: '晚餐',
						id: 3,
						children: [{
							title: '红烧肉',
							id: 12,
							fixed: true
						}, {
							title: '番茄炒蛋',
							id: 13
						}]
					}, {
						title: '夜宵',
						id: 4,
						children: [{
							title: '小龙虾',
							id: 14,
							checked: true
						}, {
							title: '香辣蟹',
							id: 15,
							disabled: true
						}, {
							title: '烤鱿鱼',
							id: 16
						}]
					}];

				//基本演示
				tree.render({
					elem: '#test12',
					data: data,
					showCheckbox: true //是否显示复选框
						,
					id: 'demoId1',
					isJump: true //是否允许点击节点时弹出新窗口跳转
						,
					click: function(obj) {
						var data = obj.data; //获取当前点击的节点数据
						layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
					}
				});

				//按钮事件
				util.event('lay-demo', {
					getChecked: function(othis) {
						var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

						layer.alert(JSON.stringify(checkedData), {
							shade: 0
						});
						console.log(checkedData);
					},
					setChecked: function() {
						tree.setChecked('demoId1', [12, 16]); //勾选指定节点
					},
					reload: function() {
						//重载实例
						tree.reload('demoId1', {

						});

					}
				});

				//常规用法
				tree.render({
					elem: '#test1' //默认是点击节点可进行收缩
						,
					data: data1
				});

				//无连接线风格
				tree.render({
					elem: '#test13',
					data: data1,
					showLine: false //是否开启连接线
				});

				//仅节点左侧图标控制收缩
				tree.render({
					elem: '#test2',
					data: data1,
					onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
						,
					click: function(obj) {
						layer.msg(JSON.stringify(obj.data));
					}
				});
				//手风琴模式
				tree.render({
					elem: '#test4',
					data: [{
						title: '优秀',
						children: [{
							title: '80 ~ 90'
						}, {
							title: '90 ~ 100'
						}]
					}, {
						title: '良好',
						children: [{
							title: '70 ~ 80'
						}, {
							title: '60 ~ 70'
						}]
					}, {
						title: '要努力奥',
						children: [{
							title: '0 ~ 60'
						}]
					}],
					accordion: true
				});

				//点击节点新窗口跳转
				tree.render({
					elem: '#test5',
					data: data,
					isJump: true //link 为参数匹配
				});

				//开启复选框
				tree.render({
					elem: '#test7',
					data: data2,
					showCheckbox: true
				});

				//开启节点操作图标
				tree.render({
					elem: '#test9',
					data: data1,
					edit: ['add', 'update', 'del'] //操作节点的图标
						,
					click: function(obj) {
						layer.msg(JSON.stringify(obj.data));
					}
				});
			});
		</script>

	</body>
</html>
